$(function() {

    var layer = layui.layer
    var form = layui.form
    var laypage = layui.laypage
    var obj = {
        page: 1,
        limit: 10,
        catename: ''
    }

    //点击影藏
    $("#yu1").on('click', function() {
            console.log(111);
            $('#yikuai').addClass('none')
            $('#xzright').addClass('none')
            $('#xzright1').removeClass('none')


        })
        //点击显示
    $("#yu2").on('click', function() {
            console.log(111);
            $('#yikuai').removeClass('none')
            $('#xzright').removeClass('none')
            $('#xzright1').addClass('none')


        })
        // 获取数据
    function initArtCateList() {

        $.ajax({
            method: 'GET',
            url: '/ydd_cate/list',
            data: obj,
            success: function(res) {
                var a = res
                console.log(a);
                var htmlStr = template('tpl-table', res.data)
                $('tbody').html(htmlStr)
                renderPage(res.data.count)
            }

        })
    }
    initArtCateList()
        //分页器
    function renderPage(total) {
        // console.log(total);
        // 使用laypage.render() 来渲染分页
        laypage.render({
            elem: 'pageBox', //分页容器的id
            count: total, //总数据的个数
            limit: obj.limit, //一页显示几条数据
            curr: obj.page, //默认显示的页码
            //定义每页条数的选择项
            limits: [10, 20, 30, 40],
            // 定义分页器中的组件
            layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
            // 分页切换时会触发,render方法被调用也会触发jump
            // 里面有一个布尔值得参数first,如果是自动加载触发则是true
            // 如果是点击分页器触发则是undefined,
            jump: function(page, first) {
                // console.log(page.curr);
                obj.page = page.curr
                    // 赋值完成后需要再次调用initTable()方法
                    //直接调用会造成程序的死循环,因为initTable()中调用了renderPage()方法
                    // 当一条显示的最新的数据重新赋值给obj.pagesize
                obj.limit = page.limit
                if (!first) {
                    // 通过点击分页器,则对文章列表进行重新渲染
                    initArtCateList()
                }
            }
        })

    }

    //筛选搜索
    $('#form-search').on('submit', function(e) {
            console.log(11111);
            e.preventDefault()
                // 获取表单中选中项的值
            var catename = $('[name=catename]').val()
            console.log(catename);

            // 为查询参数对象 q 中对应的属性赋值
            obj.catename = catename
            console.log(obj.catename);
            // 根据最新的筛选条件，重新渲染表格的数据
            initArtCateList()
        })
        //重置
    $('#chongz').on('click', function(e) {
        console.log(1111);
        e.preventDefault()
        $('#shuru').val("")
        obj.catename = ""
        initArtCateList()
    })






    // 为添加类别按钮绑定点击事件
    var indexAdd = null
    $('#xinz').on('click', function() {
            indexAdd = layer.open({
                type: 1,
                area: ['500px', '300px'],
                title: '添加文章分类',
                content: $('#dialog-add').html()

            })
            console.log(22);
        })
        // 通过代理的形式，为 form-add 表单绑定 submit 事件
    $('body').on('click', '#cancle', function() {
        layer.close(indexAdd)
    })

    // 通过代理的形式，为 form-add 表单绑定 submit 事件
    $('body').on('submit', '#form-add', function(e) {
        e.preventDefault()
        $.ajax({
            method: 'POST',
            url: '/ydd_cate/add',
            data: $(this).serialize(),
            success: function(res) {
                console.log(res);
                if (res.errno !== 0) {
                    return layer.msg('新增标签分类失败！')
                }
                initArtCateList()
                layer.msg('新增标签分类成功！')
                    // 根据索引，关闭对应的弹出层
                layer.close(indexAdd)
            }
        })
    })






    var indexEdit = null
    $('tbody').on('click', '.btn-edit', function(e) {
        // 弹出一个修改文章分类信息的层
        indexEdit = layer.open({
            type: 1,
            area: ['864px', '430px'],
            title: '修改标签分类',
            content: $('#dialog-edit').html()
        })

        var id = $(this).attr('data-id')
        console.log(id);
        // 发起请求获取对应分类的数据
        $.ajax({
            method: 'POST',
            url: '/ydd_cate/rowInfo?id=' + id,
            success: function(res) {
                console.log(res);
                form.val('form-edit', res.data)
            }
        })


    })

    $('body').on('click', '#cancle', function() {
        layer.close(indexEdit)
    })
    $('body').on('submit', '#form-edit', function(e) {
        e.preventDefault()
        $.ajax({
            method: 'POST',
            url: '/ydd_cate/update',
            data: $(this).serialize(),
            success: function(res) {
                // console.log(res);
                if (res.errno !== 0) {
                    return layer.msg('更新分类数据失败！')
                }
                layer.msg('更新分类数据成功！')
                layer.close(indexEdit)
                initArtCateList()

            }
        })
    })


    //删除
    $('tbody').on('click', '.btn-delete', function() {
        var id = $(this).attr('data-id')
            // 提示用户是否要删除
        layer.confirm('确定删除吗,是否继续?', { icon: 3, title: '提示' }, function(index) {
            $.ajax({
                method: 'GET',
                url: '/ydd_cate/del?id=' + id,
                success: function(res) {
                    if (res.errno !== 0) {
                        return layer.msg('删除分类失败！')
                    }
                    layer.msg('删除分类成功！')
                    layer.close(index)
                    initArtCateList()

                }
            })
        })
    })

    //刷新数据 
    $('#yu3').on('click', function() {
        console.log(11);
        $('.a1').addClass('none')
        setTimeout(function() {
            $('.a1').removeClass('none')
        }, 10);
    })
    $('#yu4').on('click', function() {
        console.log(11);
        $('.a1').addClass('none')
        setTimeout(function() {
            $('.a1').removeClass('none')
        }, 10);
    })


    function tableToExcel() {

        // 要导出的json数据
        var jsonData = [{
            name: '路人甲',
            phone: '123456789',
            email: '000@123456.com'
        }, {
            name: '炮灰乙',
            phone: '123456789',
            email: '000@123456.com'
        }, {
            name: '土兔丙',
            phone: '123456789',
            email: '000@123456.com'
        }, {
            name: '流与丁',
            phone: '123456789',
            email: '000@123456.com'
        }, ]

        //列标题，逗号隔开，每一个逗号就是隔开一个单元格
        let str = `姓名,电话,邮箱\n`;
        //增加\t为了不让表格显示科学计数法或者其他格式
        for (let i = 0; i < jsonData.length; i++) {
            for (let item in jsonData[i]) {
                str += `${jsonData[i][item] + '\t'},`;
            }
            str += '\n';
        }
        //encodeURIComponent解决中文乱码
        let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
        //通过创建a标签实现
        var link = document.createElement("a");
        link.href = uri;
        //对下载的文件命名
        link.download = "json数据表.csv";
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }
    $('#dao').on('click', function() {

        tableToExcel()
    })



    var yu5 = document.querySelector('#yu5')
    var flag = true
    $("#yu5").on('click', function() {
        if (flag) {
            $('.xuanz').addClass('none')
            flag = false
        } else {
            $('.xuanz').removeClass('none')
            flag = true
        }

    })



    var i1 = document.querySelector('#i1')
    $('#i1').on('click', function() {
        if (i1.checked) {
            $('.tab-id').addClass('none')
        } else {
            $('.tab-id').removeClass('none')
        }

    })
    var i2 = document.querySelector('#i2')
    $('#i2').on('click', function() {
        if (i2.checked) {
            $('.tab-name').addClass('none')
        } else {
            $('.tab-name').removeClass('none')
        }

    })
    var i3 = document.querySelector('#i3')
    $('#i3').on('click', function() {
        if (i3.checked) {
            $('.tab-icon').addClass('none')
        } else {
            $('.tab-icon').removeClass('none')
        }

    })
    var i4 = document.querySelector('#i4')
    $('#i4').on('click', function() {
        if (i4.checked) {
            $('.tab-num').addClass('none')
        } else {
            $('.tab-num').removeClass('none')
        }

    })


})